<template>
    <div style="background-color: #f0f2f5; padding: 10px">
        <el-button @click="router.push('/AddWarehouseSApp')">新增</el-button>
        <!-- <el-button type="danger">bao</el-button> -->
        <el-button type="success" @click="upd()">修改</el-button>
        <el-button type="danger" @click="Del()">删除</el-button>
        <el-button @click="role()">刷新</el-button>
        <el-button type="primary" @click="QueRen()">确认入库</el-button>
    </div>
    <br/>
    <el-form :inline="true" :model="formInlines" class="demo-form-inline">
        <el-form-item label="入库申请主题：">
            <el-input v-model="formInlines.StorageTopic"/>
        </el-form-item>
        <el-form-item label="仓库名称：">
            <el-input v-model="formInlines.WName" @dblclick="dialogVisible = true"/>
        </el-form-item>
        <el-form-item label="入库申请编号：">
            <el-input v-model="formInlines.StorageNumber"/>
        </el-form-item>
        <el-form-item label="入库类别：" prop="storageType">
            <el-select
                v-model="formInlines.StorageType"
                placeholder="请选择入库类别"
                style="width: 150px;"
                clearable
            >
                <el-option label="申请直接入库" value="申请直接入库" />
                <el-option label="采购入库" value="采购入库" />
                <el-option label="成品入库" value="成品入库" />
                <el-option label="半成品报废入库" value="半成品报废入库" />
            </el-select>
        </el-form-item>
        <el-form-item label="申请时间：" prop="Kdate">
            <el-date-picker
                v-model="formInlines.Kdate"
                type="date"
                placeholder="请选择开始日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
            -
            <el-date-picker
                v-model="formInlines.Sdate"
                type="date"
                placeholder="请选择结束日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>

        <el-form-item>
      <el-button type="primary" @click="GetWareApp">查询</el-button>
    </el-form-item>

    </el-form>
<h2 style="text-align: center;">待入库列表</h2>
<br/>
<el-table border  :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="storageNumber" label="入库申请编号" width="350" >
            <template v-slot="scope">
                <a @click="XiangQi(scope.row.shippRequestAppId)">{{ scope.row.storageNumber }}</a>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="storageTopic" label="入库申请主题" width="120" >
            <template v-slot="scope">
                <a @click="XiangQi(scope.row.shippRequestAppId)">{{ scope.row.storageTopic }}</a>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="storageType" label="入库类别" width="120" />
        <el-table-column align="center" prop="appDate" label="申请时间" width="100" >
            <template v-slot="scope">
                {{ scope.row.appDate.replace("T"," ").substring(0, 10)}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="appName" label="申请人员" width="100" />
        <el-table-column align="center" prop="wName" label="仓库名称" width="100" />
        <el-table-column align="center" prop="spConfirmNum" label="申请入库数量" width="120" />
        <el-table-column align="center" prop="sumNum" label="确认入库总量" width="120" />
        <el-table-column align="center" prop="storageSource" label="来源单据"/>
    </el-table>

    <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                            :total="formInline.sumCount">
                            ，当前是{{ formInline.PageIndex }}/{{ formInline.pageLast }}页，每页{{ formInline.PageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == 1" @click="formInline.PageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == formInline.pageLast"
                                @click="formInline.PageIndex = formInline.pageLast">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>


    <!-- 仓库弹框 -->
    <el-dialog
        v-model="dialogVisible"
        title="仓库管理"
        width="800"
        :before-close="handleClose"
    >
        <el-table :data="WarehouseList" style="width: 100%" @selection-change="handleSelectionChanges">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="warehouseId" label="序号" />
            <el-table-column prop="wNumber" label="仓库编号">
                <template v-slot="scope">
                    <a>{{ scope.row.wNumber }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="wName" label="仓库名称">
                <template v-slot="scope">
                    <a>{{ scope.row.wName }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="wType" label="所属类别">
                <template #default="scope">
                    <span v-if="scope.row.wType === 1">成品区</span>
                    <span v-if="scope.row.wType === 2">待检验</span>
                    <span v-if="scope.row.wType === 3">生产车间线边库</span>
                    <span v-if="scope.row.wType === 4">良品区</span>
                    <span v-if="scope.row.wType === 5">业务代发区</span>
                    <span v-if="scope.row.wType === 8">不良品仓库</span>
                    <span v-if="scope.row.wType === 9">商品代发区</span>
                </template>
            </el-table-column>
            <el-table-column prop="wAddress" label="仓库地址" />
        </el-table>
        <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, sizes" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            共{{ Page.listcount }}条数据，每页{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.pagecount }}页
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, prev, pager, next" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            <el-button :disabled="Page.PageIndex == 1" @click="handleCurrentChange(1)">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, jumper" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            <el-button :disabled="Page.PageIndex == Page.pagecount"
                                @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Close()">取消</el-button>
                    <el-button type="primary" @click="submit()">
                    确定
                    </el-button>
                </div>
            </template>
  </el-dialog>







</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ref, reactive, onMounted,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();
import http from '../../../http.js'




onMounted(() => {
    GetWareApp();//显示入库申请列表
    Getwarehouse();//显示仓库列表
})

//分页表字段
const formInline = reactive({
  PageIndex: 1,//页码
  PageSize: 5,//每页显示几条数据
  sumCount:0,//
  pageLast: 0,//
})
//查询表字段
const formInlines = reactive({
  StorageTopic: '',//单据主题
  WName: '',//仓库名称
  StorageNumber: '',//单据编号
  StorageType: '',//入库类别
  Kdate: '',//开始时间
  Sdate: '',//结束时间
})


//#region 仓库弹框
//仓库管理
const dialogVisible=ref(false)

const WarehouseList=ref([])
const Getwarehouse = () => {
    axios.get(http.zblnb + '/erpck/api/Warehouse/ShowWarehouse', {
        params: {
            WNumber: '',
            WName: '',
            WType:'',
            PageIndex: Page.value.PageIndex,
            PageSize: Page.value.PageSize
        }
    })
    .then((res) => {
        // console.log(res)
        WarehouseList.value = res.data.data.list
        Page.value.listcount = res.data.data.listcount
        Page.value.pagecount = res.data.data.pagecount
    })
    .catch((err) => {
        console.log(err)
    })
}

//分页
const Page = ref({
    PageIndex: 1,
    PageSize: 5,
    listcount: 0,
    pagecount: 0
})
const handleSizeChange = (val: number) => {
    Page.value.PageSize = val;
    Getwarehouse()
}
const handleCurrentChange = (val: number) => {
    Page.value.PageIndex = val;
    Getwarehouse()
}

//仓库弹框里的多选框
const Wname=ref('')
const handleSelectionChanges = (val:any) => {
    // check1.value = val
    Wname.value = val;
    
}
//取消
const Close = () => {
    dialogVisible.value= false
    formInlines.WName = '';
}
//确定
const submit = () => {
    dialogVisible.value = false
    formInlines.WName = Wname.value[0].wName;
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你真的要关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}










//#endregion


//分页
watch(formInline, () => {
    GetWareApp();
})

//显示入库申请列表
const tableData = ref([])
const GetWareApp = () => {
    axios.get(http.zblnb + '/erpck/api/WarehouseSApp/GetWarehouseSApp', {
        params: {
            StorageTopic: formInlines.StorageTopic,
            WName: formInlines.WName,
            StorageNumber: formInlines.StorageNumber,
            StorageType: formInlines.StorageType,
            Kdate: formInlines.Kdate,
            Sdate: formInlines.Sdate,
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize,
        }
    })
    .then(res => {
        // console.log(res)   
        tableData.value = res.data.data.list
        formInline.sumCount = res.data.data.sumCount
         formInline.pageLast = res.data.data.pageLast
    })
    .catch(err => {
        console.log(err)    
    })
}

const Duo=ref([])
const handleSelectionChange = (val: any) => {
    Duo.value = val;
    console.log(Duo.value)
}

//刷新
const role = () => {
    setTimeout(() => {
        location.reload();
    },700)
}

//修改
const upd = () => {
    if (Duo.value.length == 0) {
        ElMessage.error('请选择要修改的入库申请')
        return
    }
    if (Duo.value.length >1) {
        ElMessage.error('至多要选择一条要修改的入库申请')
        return
    }
    router.push({
        path: '/UpdWarehouseSApp',
        query: {
            shippRequestAppId: Duo.value[0].shippRequestAppId
        }
    })
}

//删除
const Del = () => {
    if (Duo.value.length == 0) {
        ElMessage.error('请选择要删除的入库申请')
        return
    }
    let model = {
        id: Duo.value.map(ele => ele.shippRequestAppId),
        delName:'lf'
    }
     ElMessageBox.confirm(
    '你真的要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post(http.zblnb + '/erpck/api/WarehouseSApp/DelWarehouseSApp',model)
    .then(res => {
        if (res.data.data > 0) {
            ElMessage.success('删除成功')
            GetWareApp();
        }   
        else {
            ElMessage.error('删除失败')
            return
        } 
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
    



}

//确认入库
const QueRen = () => {
    if (Duo.value.length == 0) {
        ElMessage.error('请选择要确认入库的信息')
        return
    }
    if (Duo.value.length >1) {
        ElMessage.error('要确认入库的信息只能选择一件')
        return
    }
    router.push({
        path: '/ConfirmWarehouseentry',
        query: {
            shippRequestAppId: Duo.value[0].shippRequestAppId
        }
    })
}


//点击主题跳转
const XiangQi = (id: any) => {
    router.push({
        path: '/InventoryDetails',
        query: {
            shippRequestAppId: id
        }
    })
}

    
</script>
    
<style>
    
</style>